<template>
<div>
  <div class="navbor">
    <div class="loginShopNav">
      <p class="ys-back-home">
        <a @click="toIndex" style="cursor: pointer">依尚服装首页</a>
      </p>
      <p class="helloYS"><em>嗨!欢迎来到依尚服装</em>
        <a @click="toLogin" :style="userInfoStyle" style="cursor: pointer">请登录</a>
        <a class="clearRight" @click="resgister" :style="userInfoStyle">注册</a>
        <a id="users" :style="userInfoAfterStyle" @mouseenter="showInfo"
           @mouseleave="showInfoOut">{{ userInfousername }}</a>
      </p>
      <div class="ys-index-userInfo" :style="userMainInfo" @mouseenter="showInfo" @mouseleave="showInfoOut">
        <div class="ys-index-userInfo-head"></div>
        <a href="#">账号管理</a>
        <a href="#" id="ys-index-userInfo-loginout" @click="delCookieValue">退出登录</a>
        <h5>个人积分: 460</h5>
        <h5 id="ys-index-userInfo-vip">普通会员</h5>
      </div>
      <ul class="quick-menu">
        <li><a @click="showCookieValue">我的"依尚"</a></li>
        <li><a style="cursor: pointer " @click="toShopCart">购物车</a></li>
        <li><a class="clearLiRight" @click="toCollectionShop" style="cursor: pointer ">收藏夹</a></li>
      </ul>
    </div>
  </div>
</div>
</template>

<script>
import {publicFun} from "../mixin";
export default {
  name: "Header",
  mixins:[publicFun],
  data(){
    return{
      cookieValue: "",
      userInfoStyle: "",
      userInfoAfterStyle: "display:none",
      userInfousername: "",
      userMainInfo: "display:none",
      userhasLogin: "display:none",
      userHasNotLogin: ""
    }
  },
  methods:{
    showCookieValue() {
      var token = this.getCookieValue("token");
      var username = this.getCookieValue("username");
      if (token != null && token != "") {
        this.userInfousername = username;
        this.userInfoStyle = "display:none";
        this.userInfoAfterStyle = "";
      } else {
        this.userInfoStyle = "";
        this.userInfoAfterStyle = "display:none";
      }
    },showInfo() {
      this.userMainInfo = "";
    },
    showInfoOut() {
      this.userMainInfo = "display:none";
    }
  },
  created(){
    this.showCookieValue()
  }
}
</script>

<style scoped>
.navbor {
  height: 35px;
  border-top: 1px solid #edeef0;
  border-bottom: 1px solid #edeef0;
  background-color: #fcfcfc;
  width: 100%;
}

.loginShopNav {
  height: 35px;
  width: 1190px;
  background-color: rgba(239, 239, 239, 0.69);
  position: relative;
  margin: auto;
}

.loginShopNav .ys-back-home a {
  display: inline-block;
  height: 35px;
  text-decoration: none;
  font-size: 12px;
  color: #a9a9a9;
  line-height: 35px;
  margin-right: 20px;
}

.loginShopNav .ys-back-home a:hover {
  background-color: #eee;
  text-decoration: underline;
  color: #01ccb3;
}

.loginShopNav p {
  display: inline-block;
  height: 35px;
}

.loginShopNav .helloYS em {
  height: 35px;
  line-height: 35px;
  display: inline-block;
  font-style: normal;
  font-size: 12px;
  color: #a9a9a9;
  margin-right: 20px;
}

.loginShopNav .helloYS a {
  display: inline-block;
  text-decoration: none;
  height: 35px;
  font-size: 12px;
  color: #a9a9a9;
  line-height: 35px;
  margin-right: 20px;
}

.loginShopNav .helloYS a:hover {
  background-color: #eee;
  text-decoration: underline;
  color: #01ccb3;
}

.loginShopNav .helloYS .clearRight {
  margin-right: 0;
}

.loginShopNav li {
  list-style: none;
  display: inline-block;
}

.loginShopNav ul {
  display: inline-block;
  float: right;
}

.loginShopNav ul li a {
  height: 35px;
  line-height: 35px;
  display: inline-block;
  margin-right: 20px;
  text-decoration: none;
  color: #a9a9a9;
  font-size: 12px;
}

.loginShopNav ul li a:hover {
  background-color: rgba(227, 227, 227, 0.57);
  text-decoration: underline;
  color: #01ccb3;
}

.loginShopNav .quick-menu .clearLiRight {
  margin-right: 0;
}
#users:hover {
  background-color: white;
  text-decoration: none;
}
.ys-index-userInfo {
  position: absolute;
  height: 100px;
  width: 220px;
  /*border: 1px solid black;*/
  margin-left: 223.7px;
  margin-top: 0px;
  z-index: 99999;
  background-color: white;
  border-radius: 0 0 10px 10px;

}
.ys-index-userInfo-head {
  height: 60px;
  width: 60px;
  border: 1px solid black;
  margin-top: 20px;
  margin-left: 10px;
  border-radius: 30px;
}

.ys-index-userInfo > a {
  text-decoration: none;
  position: absolute;
  display: block;
  font-size: 10px;
  margin-left: 100px;
  margin-top: -80px;
  color: #a9a9a9;
}

#ys-index-userInfo-loginout {
  margin-left: 160px;
}

.ys-index-userInfo > a:hover {
  color: #01ccb3;
}

.ys-index-userInfo > h5 {
  position: absolute;
  margin-left: 100px;
  margin-top: -50px;
  font-weight: 400;
  font-size: 12px;
}

#ys-index-userInfo-vip {
  margin-top: -20px;
}

#ys-Notice-haslogin {
  position: absolute;
  margin-top: 120px;
  margin-left: 155px;
  color: #008676;
}

#ys-Notice-haslogin:hover {
  color: #00dcc0;
}

.ys-notice-hasLogin {
  width: 300px;
  height: 50px;
  /*border: 1px solid black;*/
  position: absolute;
  margin-left: 33px;
  margin-top: 150px;
}

.ys-hasLogin-Info {
  /*display: inline-block;*/
  width: 50px;
  height: 50px;
  /*border: 1px solid black;*/
  float: left;
  margin-left: 8px;
  text-align: center;
  color: #01ccb3;
}
.ys-hasLogin-Info>a{
  display: block;
  text-decoration: none;
  font-size: 14px;
  color: black;
}
.ys-hasLogin-Info>a:hover{
  color: #01ccb3;
}
</style>